<f:if condition="{loginNewsItems}">
    <div class="panel-carousel carousel slide t3js-login-news-carousel" id="loginNews" data-interval="0" data-ride="carousel">
        <div class="carousel-inner">
            <f:for each="{loginNewsItems}" as="item" iteration="loginNewsIterator">
                <div class="item{f:if(condition: loginNewsIterator.isFirst,then: ' active')}">
                    <h3 class="typo3-login-news-heading">{item.header}</h3>
                    <f:format.html>{item.content}</f:format.html>
                    <span class="text-muted">{item.date}</span>
                </div>
            </f:for>
        </div>
        <f:if condition="{loginNewsItems -> f:count()} > 1">
            <a class="left typo3-login-carousel-control" href="#loginNews" role="button" data-slide="prev">
            <i class="fa fa-angle-left"></i>
            <span class="sr-only"><f:translate key="login.news.previous" /></span>
            </a>
            <a class="right typo3-login-carousel-control" href="#loginNews" role="button" data-slide="next">
                <i class="fa fa-angle-right"></i>
                <span class="sr-only"><f:translate key="login.news.next" /></span>
            </a>
        </f:if>
    </div>
</f:if>
